<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="../internal.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.1&services=true"></script>
    <style type="text/css">
        .content{width:530px; height: 350px;margin: 10px auto;}
        .content table{width: 100%}
        .content table td{vertical-align: middle;}
        #city,#address{height:21px;background: #FFF;border:1px solid #d7d7d7; line-height: 21px;}
        #city{width:60px}
        #address{width:130px}
        #is_dynamic_label span{vertical-align:middle;margin: 3px 0px 3px 3px;}
        #is_dynamic_label input{vertical-align:middle;margin: 3px 3px 3px 50px;}
    </style>
</head>
<body>
<div class="content">
    <table>
        <tr>
            <td><var id="lang_city"></var>:</td>
            <td><input id="city" type="text" /></td>
            <td><var id="lang_address"></var>:</td>
            <td><input id="address" type="text" value="" /></td>
            <td><a href="javascript:doSearch()" class="button"><var id="lang_search"></var></a></td>
            <td><label id="is_dynamic_label" for="is_dynamic"><input id="is_dynamic" type="checkbox" name="is_dynamic" /><span><var id="lang_dynamicmap"></var></span></label></td>
        </tr>
    </table>
    <div style="width:100%;height:340px;margin:5px auto;border:1px solid gray" id="container"></div>

</div>
<script type="text/javascript">
    var map = new BMap.Map('container'), marker, point, styleStr
map.enableScrollWheelZoom()
map.enableContinuousZoom()
function doSearch () {
      if (!document.getElementById('city').value) {
        alert(lang.cityMsg)
        return
    }
      var search = new BMap.LocalSearch(document.getElementById('city').value, {
        onSearchComplete: function (results) {
          if (results && results.getNumPois()) {
            var points = []
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              points.push(results.getPoi(i).point)
            }
            if (points.length > 1) {
              map.setViewport(points)
            } else {
              map.centerAndZoom(points[0], 13)
            }
            point = map.getCenter()
            marker.setPoint(point)
          } else {
            alert(lang.errorMsg)
          }
        }
      })
    search.search(document.getElementById('address').value || document.getElementById('city').value)
}
    // 获得参数
    function getPars (str, par) {
      var reg = new RegExp(par + '=((\\d+|[.,])*)', 'g')
    return reg.exec(str)[1]
}
    function init () {
      var mapNode = editor.selection.getRange().getClosedNode(),
        isMapImg = mapNode && /api[.]map[.]baidu[.]com/ig.test(mapNode.getAttribute('src')),
        isMapIframe = mapNode && domUtils.hasClass(mapNode, 'ueditor_baidumap')
    if (isMapImg || isMapIframe) {
      var url, centerPos, markerPos
      if (isMapIframe) {
        url = decodeURIComponent(mapNode.getAttribute('src'))
        $G('is_dynamic').checked = true
        styleStr = mapNode.style.cssText
      } else {
        url = mapNode.getAttribute('src')
        styleStr = mapNode.style.cssText
      }

      centerPos = getPars(url, 'center').split(',')
      markerPos = getPars(url, 'markers').split(',')
      point = new BMap.Point(Number(centerPos[0]), Number(centerPos[1]))
      marker = new BMap.Marker(new BMap.Point(Number(markerPos[0]), Number(markerPos[1])))
      map.addControl(new BMap.NavigationControl())
      map.centerAndZoom(point, Number(getPars(url, 'zoom')))
    } else {
      point = new BMap.Point(116.404, 39.915)    // 创建点坐标
      marker = new BMap.Marker(point)
      map.addControl(new BMap.NavigationControl())
      map.centerAndZoom(point, 10)                     // 初始化地图,设置中心点坐标和地图级别。
    }
      marker.enableDragging()
    map.addOverlay(marker)
}
    init()
document.getElementById('address').onkeydown = function (evt) {
      evt = evt || event
    if (evt.keyCode == 13) {
      doSearch()
    }
    }
dialog.onok = function () {
      var center = map.getCenter()
    var zoom = map.zoomLevel
    var size = map.getSize()
    var mapWidth = size.width
    var mapHeight = size.height
    var point = marker.getPoint()

    if ($G('is_dynamic').checked) {
      var URL = editor.options.UEDITOR_HOME_URL,
        url = [URL + (/\/$/.test(URL) ? '' : '/') + 'dialogs/map/show.html' +
                    '#center=' + center.lng + ',' + center.lat,
          '&zoom=' + zoom,
          '&width=' + mapWidth,
          '&height=' + mapHeight,
          '&markers=' + point.lng + ',' + point.lat,
          '&markerStyles=' + 'l,A'].join('')
      editor.execCommand('inserthtml', '<iframe class="ueditor_baidumap" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' : '') + ' frameborder="0" width="' + (mapWidth + 4) + '" height="' + (mapHeight + 4) + '"></iframe>')
    } else {
      var url = 'http://api.map.baidu.com/staticimage?center=' + center.lng + ',' + center.lat +
                    '&zoom=' + zoom + '&width=' + size.width + '&height=' + size.height + '&markers=' + point.lng + ',' + point.lat
      editor.execCommand('inserthtml', '<img width="' + size.width + '"height="' + size.height + '" src="' + url + '"' + (styleStr ? ' style="' + styleStr + '"' : '') + '/>')
    }
    }
document.getElementById('address').focus()
</script>


</body>
</html>
